import { React, useEffect } from "react";
import { useDispatch } from "react-redux";
import { HIDE_TABBER, SHOW_TABBER } from "../store/action-type/tabber";
import { NavBar, Space, Swiper, SearchBar } from "antd-mobile";
import { SearchOutline, MoreOutline, TruckOutline } from "antd-mobile-icons";
import { useHistory } from "react-router-dom";
import "../MIUIcss/Findtype/preferential.scss";
import img1 from "../../src/image/Find/findimg02.png";
import img2 from "../../src/image/Find/swiper2.jpg";
import img3 from "../../src/image/Find/swiper3.jpg";

const imgs = [img1, img2, img3];
const items = imgs.map((img, index) => (
  <Swiper.Item key={index}>
    <img src={img} alt="" />
  </Swiper.Item>
));
function preferential() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: HIDE_TABBER });
  }, []);
  const { go } = useHistory();

  const back = () => {
    go(-1);
    dispatch({ type: SHOW_TABBER });
  };
  const { replace } = useHistory();
  return (
    <div className="preferential">
      <div className="nav-bar">
        <NavBar
          right={
            <TruckOutline
              fontSize={36}
              color="#fff"
              onClick={() => {
                replace("/Cart");
                dispatch({ type: SHOW_TABBER });
              }}
            />
          }
          onBack={back}
        >
          <SearchBar />
        </NavBar>
      </div>
      <div className="shuffling">
        <Swiper autoplay loop>
          {items}
        </Swiper>
      </div>
      <div className="hotsales">
        <div className="hotsales-h2">
          <h2>经典爆款，限时特惠</h2>
        </div>
        <div className="p-hotsales">
          <img src="../../src/image/Find/img04.jpg" alt="" />
          <div className="title-price">
            <div className="hotsales-title">
              <h3>米家电磁炉</h3>
              <h3>
                <span>￥200</span>
              </h3>
            </div>
            <div className="hot-pre">
              <p>双频火力精准控温</p>
              <button>33日25点开售</button>
            </div>
          </div>
        </div>
        <ul>
          <li>
            <img src="../../src/image/Find/img05.jpg" alt="" />
            <h3>米家激光投影电视</h3>
            <p>千元全面屏，前置柔光自拍</p>
            <b>￥</b>
            <span>9499</span>
            <br />
            <button>立即购买</button>
          </li>
          <li>
            <img src="../../src/image/Find/img05.jpg" alt="" />
            <h3>米家激光投影电视</h3>
            <p>千元全面屏，前置柔光自拍</p>
            <b>￥</b>
            <span>9499</span> <br />
            <button>立即购买</button>
          </li>
          <li>
            <img src="../../src/image/Find/img06.jpg" alt="" />
            <h3>米家激光投影电视</h3>
            <p>千元全面屏，前置柔光自拍</p>
            <b>￥</b>
            <span>9499</span> <br />
            <button>立即购买</button>
          </li>
          <li>
            <img src="../../src/image/Find/img06.jpg" alt="" />
            <h3>米家激光投影电视</h3>
            <p>千元全面屏，前置柔光自拍</p>
            <b>￥</b>
            <span>9499</span>
            <br />
            <button>立即购买</button>
          </li>
        </ul>
      </div>
      <div className="find-advertising">
        <h1>送你一张现金券</h1>
        <h3>
          扫码关注「小米商城」微信公众号
          <br />
          回复“感恩季”抽送100元现金券
        </h3>
        <img src="../../src/image/Find/findimg02.png" alt="" />
      </div>
    </div>
  );
}

export default preferential;
